<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download App</title>
    <script>
        async function handleInstall(appName, manifestUrl) {
            const downloadStatus = document.getElementById("downloadStatus");
            downloadStatus.textContent = `Downloading ${appName}... Please return to Home Screen to check the installation progress.`;
            downloadStatus.style.display = "block";

            try {
                const response = await fetch(manifestUrl);
                if (response.ok) {
                    // 提示安装链接跳转
                    window.location.href = `itms-services://?action=download-manifest&url=${manifestUrl}`;
                } else {
                    // 下载失败时显示错误信息
                    downloadStatus.textContent = `Error downloading ${appName}: ${response.statusText}`;
                }
            } catch (error) {
                // 捕获网络错误
                downloadStatus.textContent = `Network error while downloading ${appName}: ${error.message}`;
            }
        }
    </script>
    <style>
        #downloadStatus {
            display: none;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Available Apps</h1>
    <div id="downloadStatus"></div>
    <ul>
        {% for app in apps %}
        <li>
            <h2>{{ app.app_name }}</h2>
            <button onclick="handleInstall('{{ app.app_name }}', '{{ app.manifest_url }}')">
                Install {{ app.app_name }}
            </button>
        </li>
        {% endfor %}
    </ul>
</body>
</html>
